<nz-card nzTitle="基本信息">
  <nz-descriptions
    nzBordered
    nzSize="small"
    [nzColumn]="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="促销ID">{{ detailDatas?.id }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="状态">
      <span
        *ngIf="detailDatas?.status || detailDatas?.status == 0"
        [ngStyle]="{'color': detailDatas?.status | sencondDescentListStatus: 'color'}"
      >
        {{ detailDatas?.status | sencondDescentListStatus: 'label' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="创建时间">{{ detailDatas?.createTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="活动名称" [nzSpan]="2">
      {{ detailDatas?.name || '-' }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="前端标题">{{ detailDatas?.showCopy || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="使用门槛" *ngIf="[1, 2].includes(detailDatas?.type)">
      订单满 {{ detailDatas?.orderLimitMoney || '0' }} 元可用
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="领取人限制">
      <nz-tag [nzColor]="'#2db7f5'" *ngIf="detailDatas.userType == 2">B端</nz-tag>
      <nz-tag [nzColor]="'#87d068'" *ngIf="detailDatas.userType == 1">C端</nz-tag>
      <nz-tag *ngIf="detailDatas.userType == 0">通用</nz-tag>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="有效时间">
      {{ detailDatas?.beginTime || '' }} ~ {{ detailDatas?.endTime || '' }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="活动类型">
      {{ detailDatas?.type | activityTypeStatus }}
    </nz-descriptions-item>
    <ng-container *ngIf="detailDatas.type == 1;else activityTypeTemplate">
      <nz-descriptions-item nzTitle="减免额度">
        {{ detailDatas.limitSmall || '0' }}元
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="倍数减免">
        {{ detailDatas.overlayFlag == 0 ? '否' : (detailDatas.overlayFlag == 1 ? '是' : '-') }}
      </nz-descriptions-item>
    </ng-container>

    <ng-template #activityTypeTemplate>
      <nz-descriptions-item nzTitle="折扣力度" *ngIf="[1, 2].includes(detailDatas?.type)">
        {{ detailDatas.limitSmall || '0' }} 折
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="最高减免" *ngIf="[1, 2].includes(detailDatas?.type)">
        {{ detailDatas.limitBig || '0' }} 元
      </nz-descriptions-item>
    </ng-template>
    
    <nz-descriptions-item nzTitle="备注" [nzSpan]="3">{{ detailDatas?.remark || '-' }}</nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card
  *ngIf="discountTable?.length"
  [nzTitle]="detailDatas?.type | activityTypeStatus"
  class="m-t-4">
  <nz-table
    #multipleTable
    nzSize="small"
    nzBordered
    [nzFrontPagination]="false"
    [nzData]="discountTable">
    <thead>
      <tr>
        <th nzAlign="center">{{[3, 4].includes(detailDatas.type) ? '>=件数' : '>=金额'}}</th>
        <!-- 多件折扣3 or 阶梯折扣6 -->
        <ng-container *ngIf="[3, 6].includes(detailDatas.type)">
          <th nzAlign="center">折扣率</th>
          <th nzAlign="center">最多减免</th>
        </ng-container>
        <!-- 多件立减4 or 阶梯满减5 -->
        <ng-container *ngIf="[4, 5].includes(detailDatas.type)">
          <th nzAlign="center">减免</th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of multipleTable.data">
        <!-- 3，4件数、5，6金额 -->
        <td nzAlign="center">
          {{[3, 4].includes(detailDatas.type) ? data.number : data.orderLimitMoney}}
        </td>
        <!-- 多件折扣3 or 阶梯折扣6 -->
        <ng-container *ngIf="[3, 6].includes(detailDatas.type)">
          <td nzAlign="center">{{data.discountRate || '-'}}</td>
          <td nzAlign="center">{{data.maxReduction || '-'}}</td>
        </ng-container>
        <!-- 多件立减4 or 阶梯满减5 -->
        <ng-container *ngIf="[4, 5].includes(detailDatas.type)">
          <td nzAlign="center">{{data.reduction || '-'}}</td>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<nz-card nzTitle="使用记录" [nzExtra]="useRecordTemplate" class="m-t-4">
  <ng-template #useRecordTemplate>
    <div class="oprea-wrap">
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="全部订单状态"
        [(ngModel)]="useTableParams.status"
        (ngModelChange)="statusChange($event)">
        <nz-option
          *ngFor="let o of recordStatusOptions"
          [nzLabel]="o.label"
          [nzValue]="o.value"
        ></nz-option>
      </nz-select>
    </div>
  </ng-template>

  <div class="table-wrap m-t-10">
    <nz-table
      #useCounpTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="useTableParams.loading"
      [nzData]="useTableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="useTableParams.total"
      [nzPageIndex]="useTableParams.page"
      [nzPageSize]="useTableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="180px">订单编号</th>
          <th nzAlign="center" nzWidth="120px">订单状态</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="120px">应付金额</th>
          <th nzAlign="center" nzWidth="120px">实付金额</th>
          <th nzAlign="center" nzWidth="120px">优惠总额</th>
          <th nzAlign="center" nzWidth="120px">本优惠抵值</th>
          <th nzAlign="center" nzWidth="170px">下单时间</th>
          <th nzAlign="center" nzWidth="170px">付款时间</th>
          <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of useCounpTable.data; let index = index;">
          <!-- 订单编号 -->
          <td nzAlign="center">{{ data.orderNum || '-' }}</td>
          <!-- 订单状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | sencondDescentStatus: 'color'}">
              {{ data.status | sencondDescentStatus: 'label' }}
            </span>
          </td>
          <!-- 用户ID -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              nzSize="small"
              target="_blank"
              [routerLink]="['/customer/tabs', data.userId, 0]"
            >{{ data.userId }}</a>
          </td>
          <!-- 应付金额 -->
          <td nzAlign="center">{{ data?.totalPrice ||'0' }}</td>
          <!-- 实付金额 -->
          <td nzAlign="center">{{ data?.realPrice || '0' }}</td>
          <!-- 优惠总额 -->
          <td nzAlign="center">{{ data?.favorablePrice || '0' }}</td>
          <!-- 本优惠抵值 -->
          <td nzAlign="center">{{ data?.discountValue || '0' }}</td>
          <!-- 下单时间 -->
          <td nzAlign="center">{{ data?.orderTime || '-' }}</td>
          <!-- 付款时间 -->
          <td nzAlign="center">{{ data?.payTime || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              (click)="showFollowModal(data)"
            >跟进订单</button>

            <button
              *ngIf="[5, 6, 7].includes(data.status) && permission.userPermission.has('secondDesrecord:cancelOrder')"
              nz-button
              nzType="link"
              nzDanger
              (click)="cannlOrder(data)"
            >取消订单</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- 跟进Component -->
<app-follow-up #followUpRef [initParams]="initParams" [ohterParams]="{ type: 1 }"></app-follow-up>